<!DOCTYPE html>
<html>
<head>
    <title>Pulley System Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="pulleyCanvas" width="300" height="500"></canvas>
    <script>
        const canvas = document.getElementById('pulleyCanvas');
        const ctx = canvas.getContext('2d');
        
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // Define main coordinates
        const centerX = 150;

        // 1. Draw Fixed Support
        ctx.beginPath();
        ctx.moveTo(70, 30);
        ctx.lineTo(230, 30);
        ctx.stroke();
        for (let i = 0; i < 11; i++) {
            ctx.moveTo(80 + i * 14, 30);
            ctx.lineTo(95 + i * 14, 15);
        }
        ctx.stroke();

        // 2. Draw Top Fixed Pulley (P1)
        const p1 = { x: centerX, y: 70, r: 30 };
        ctx.beginPath();
        ctx.moveTo(p1.x, 30);
        ctx.lineTo(p1.x, p1.y - p1.r - 5);
        ctx.stroke();
        ctx.strokeRect(p1.x - 6, p1.y - p1.r - 5, 12, p1.r * 2 + 10);
        ctx.beginPath();
        ctx.arc(p1.x, p1.y, p1.r, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(p1.x, p1.y, 5, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();

        // 3. Draw Movable Pulleys and their block
        const p2 = { x: centerX, y: 145, r: 15 }; // Middle movable pulley
        const p3 = { x: centerX, y: 195, r: 12 }; // Smallest movable pulley
        const p4 = { x: centerX, y: 270, r: 25 }; // Bottom movable pulley

        // Block for P2 and P3
        ctx.beginPath();
        ctx.moveTo(p2.x - 10, p2.y - p2.r - 10);
        ctx.lineTo(p2.x - 10, p3.y + p3.r + 10);
        ctx.moveTo(p2.x + 10, p2.y - p2.r - 10);
        ctx.lineTo(p2.x + 10, p3.y + p3.r + 10);
        ctx.stroke();

        // P2 with its Clevis and Hook
        ctx.beginPath();
        ctx.rect(p2.x - 10, p2.y - 5, 20, 10); // Clevis body
        ctx.moveTo(p2.x, p2.y - 5);
        ctx.lineTo(p2.x, p2.y - 15);
        ctx.arc(p2.x - 6, p2.y - 15, 6, 0, Math.PI, true); // Hook
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(p2.x, p2.y, p2.r, 0, 2 * Math.PI);
        ctx.stroke();

        // P3 with its Clevis
        ctx.beginPath();
        ctx.rect(p3.x - 10, p3.y - 5, 20, 10);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(p3.x, p3.y, p3.r, 0, 2 * Math.PI);
        ctx.stroke();

        // Block for P4
        ctx.beginPath();
        ctx.strokeRect(p4.x - 8, p4.y - p4.r - 5, 16, p4.r * 2 + 10);
        ctx.beginPath();
        ctx.arc(p4.x, p4.y, p4.r, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(p4.x, p4.y, 5, 0, 2 * Math.PI);
        ctx.fill();

        // Hook for P4
        const hookTopY = p4.y + p4.r + 5;
        ctx.beginPath();
        ctx.moveTo(p4.x, hookTopY);
        ctx.lineTo(p4.x, hookTopY + 10);
        ctx.arc(p4.x, hookTopY + 15, 5, Math.PI, 0, true);
        ctx.stroke();

        // 4. Draw the Basket
        const basketTopY = hookTopY + 20;
        ctx.beginPath();
        ctx.moveTo(p4.x, basketTopY);
        ctx.lineTo(p4.x - 35, basketTopY + 25);
        ctx.moveTo(p4.x, basketTopY);
        ctx.lineTo(p4.x + 35, basketTopY + 25);
        ctx.stroke();
        const basketBodyY = basketTopY + 25;
        const basket = {
            topL: {x: p4.x - 45, y: basketBodyY},
            topR: {x: p4.x + 45, y: basketBodyY},
            botL: {x: p4.x - 30, y: basketBodyY + 60},
            botR: {x: p4.x + 30, y: basketBodyY + 60},
            rimH: 10
        };
        ctx.beginPath();
        ctx.moveTo(basket.topL.x, basket.topL.y);
        ctx.lineTo(basket.topR.x, basket.topR.y);
        ctx.lineTo(basket.botR.x, basket.botR.y);
        ctx.lineTo(basket.botL.x, basket.botL.y);
        ctx.closePath();
        ctx.stroke();
        // Basket Rim
        ctx.fillRect(basket.topL.x - 1, basket.topL.y - basket.rimH, (basket.topR.x - basket.topL.x) + 2, basket.rimH);

        // Basket Netting
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(basket.topL.x, basket.topL.y); ctx.lineTo(basket.topR.x, basket.topR.y);
        ctx.lineTo(basket.botR.x, basket.botR.y); ctx.lineTo(basket.botL.x, basket.botL.y);
        ctx.closePath();
        ctx.clip();
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        for (let i = -8; i < 9; i++) {
            ctx.moveTo(basket.topL.x + i * 15, basket.topL.y);
            ctx.lineTo(basket.botL.x - 50 + i * 15, basket.botR.y + 10);
            ctx.moveTo(basket.topR.x - i * 15, basket.topL.y);
            ctx.lineTo(basket.botR.x + 50 - i * 15, basket.botR.y + 10);
        }
        ctx.stroke();
        ctx.restore();

        // 5. Draw the Rope
        ctx.beginPath();
        ctx.lineWidth = 2;
        // The rope path in the original is stylized. This path replicates that look.
        
        // Free end rope segment (leftmost)
        const ropeClamp = {x: basket.topL.x + 10, y: basket.topL.y - basket.rimH};
        ctx.strokeRect(ropeClamp.x - 5, ropeClamp.y - 12, 10, 12); // clamp
        ctx.moveTo(ropeClamp.x, ropeClamp.y);
        ctx.arc(ropeClamp.x - 6, ropeClamp.y - 17, 6, Math.PI/2, Math.PI*1.9); // loop
        ctx.lineTo(p2.x - p2.r - 12, p2.y);
        ctx.stroke();
        
        // Main rope body
        ctx.beginPath();
        // From anchor on top fixed block
        ctx.moveTo(p1.x - 6, p1.y + p1.r + 5);
        // Around P4
        ctx.lineTo(p1.x - 6, p4.y - p4.r);
        ctx.arc(p4.x, p4.y, p4.r, Math.PI*0.9, Math.PI*0.1, false);
        // Up to P1
        ctx.lineTo(p4.x + p4.r, p1.y);
        ctx.arc(p1.x, p1.y, p1.r, 0, Math.PI, true);
        // Down to P2
        ctx.lineTo(p1.x - p1.r, p2.y);
        ctx.arc(p2.x, p2.y, p2.r, Math.PI, Math.PI*1.9, false);
        // The weird diagonal to P3's area
        ctx.lineTo(p2.x, p3.y + p3.r);
        ctx.stroke();

    </script>
</body>
</html>